<template>
  <div class="goodscate">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品分类</span>
        <el-button type="primary" @click="dialogFormVisible = true"
          >添加分类</el-button
        >
      </div>
      <el-table :data="tableData" :style="{ width: w + 'px' }">
        <el-table-column label="序号" type="index" width="100px">
        </el-table-column>
        <el-table-column prop="cateName" label="分类名称">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <span v-show="scope.row.isEdit === false">{{
              scope.row.cateName
            }}</span>
            <el-input
              v-model="scope.row.cateName"
              v-show="scope.row.isEdit === true"
              >{{ scope.row.cateName }}</el-input
            >
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="scope.row.isEdit == false ? true : false"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-button
              :type="scope.row.isEdit == false ? 'primary' : 'success'"
              size="mini"
              @click="editRow(scope.row)"
              >{{ scope.row.isEdit == false ? "编辑" : "完成" }}</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="delGoodsCate(scope.row)"
              >删除</el-button
            >
          </template>
          <el-row> </el-row>
        </el-table-column>
      </el-table>
      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input
              v-model="form.cateName"
              autocomplete="off"
              placeholder="请输入分类名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用" :label-width="formLabelWidth">
            <el-switch
              v-model="form.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editGoods">确 定</el-button>
        </div>
      </el-dialog>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { cateList, editcate, goodsDel, addcate } from "../../api/goods";
export default {
  data() {
    return {
      // value: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      currentPage: 1, //当前页
      pageSize: 5, //每页的条数
      total: 0,
      w: document.body.clientWidth - 300,
      form: {
        cateName: "",
        region: "",
        type: [],
        state: false,
      },
      formLabelWidth: "120px",
      tableData: [],
    };
  },
  methods: {
    //删除商品分类
    delGoodsCate(row) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          let res = await goodsDel(row);
          let { code, msg } = res;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.loadGoods();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑按钮
    async editRow(row) {
      row.isEdit = !row.isEdit;
      if (!row.isEdit) {
        let res = await editcate(row);
        console.log(res);
      }
    },
    model() {
      document.querySelector(".model").display = "block";
    },
    async loadGoods() {
      let res = await cateList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      // console.log(res);
      let { total, data } = res;
      //添加一个是否可以编译的字段
      data.forEach((value) => (value.isEdit = false));
      console.log(data);
      this.total = total;
      this.tableData = data;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.loadGoods();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.loadGoods();
    },
    //添加商品
    async editGoods() {
      console.log(1);
      this.dialogFormVisible = false;
      let res = await addcate({
        cateName: this.form.cateName,
        state: this.form.state,
      });
      this.loadGoods();
    },
    //处理页面宽度发生改变的函数
    resizeHandle() {
      this.w = document.body.clientWidth - 300;
    },
  },
  created() {
    window.addEventListener("resize", this.resizeHandle);
    this.loadGoods();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandle);
  },
};
</script>

<style lang="less" scoped>
/deep/.clearfix {
  display: flex;
  justify-content: space-between;
}
</style>